<script setup lang="ts">
import { ref, watch } from 'vue';
import {  ElDialog } from 'element-plus';
const props = defineProps({
    modelValue: Boolean,
    title: {
        type: String,
        default: 'xxx弹窗'
    },
    width: {
        type: String,
        default: '50%'
    }
});
console.log('props', props)
const emit = defineEmits(['update:modelValue']);

const visible = ref(props.modelValue);

const handleClose = () => {
    emit('update:modelValue', false);
};

watch(() => props.modelValue, (newVal) => {
    console.log('newVal', newVal)
    visible.value = newVal;
}, { immediate: true });

</script>

<template>
    <el-dialog :title="title" v-model:visible="visible" :width="width" :before-close="handleClose" @close="handleClose">
        <slot></slot>
    </el-dialog>
</template>

